<script>
import Icon from '/@/components/base/Icon.vue';
import { arrHasData } from '/@/utils';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
export default defineComponent({
	name: 'ImgList',
	components: { Icon, PictureSelectorDialog },
	props: {
		modelValue: {
			type: String,
			default: '',
		},
		// closeBtn: {
		//     type: Boolean,
		//     default: true,
		// },
	},
	emits: ['update:modelValue', 'change'],
	setup(props, { emit }) {
		const isShowPicSelector = ref(false);
		const imgUrl = computed({
			get: () => {
				return props.modelValue;
			},
			set: (val) => {
				console.log(val);
				emit('update:modelValue', val);
			},
		});
		return {
			imgUrl,
			isShowPicSelector,
			delItem() {
				imgUrl.value = '';
			},
			selectPic() {
				isShowPicSelector.value = true;
			},
			getPic(pic) {
				if (!arrHasData(pic)) return;
				// emit("change", pic);
				imgUrl.value = pic[0].imgUrl;
			},
		};
	},
});
</script>
<template>
	<div class="ImgList">
		<ul>
			<li v-if="imgUrl">
				<a href="javascript:;" @click="selectPic">
					<Img :src="imgUrl" width="100px" height="100px" />
				</a>
				<span @click="delItem">
					<Icon name="CloseBold" class="del_icon" />
				</span>
			</li>
			<li v-else>
				<div class="plus_wrap" @click="selectPic">
					<Icon name="Plus" />
				</div>
			</li>
		</ul>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.ImgList {
	ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
		li {
			position: relative;
			width: 120px;
			height: 100px;
			box-sizing: border-box;
			padding: 0 10px;
			margin-bottom: 10px;
			.del_icon {
				position: absolute;
				top: 0px;
				right: 15px;
				display: none;
				font-size: 16px;
				cursor: pointer;
			}
			&:hover {
				.icon {
					display: inline-block;
				}
			}
			.plus_wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100px;
				border: 1px solid #dedede;
				cursor: pointer;
				.icon {
					font-size: 30px;
				}
			}
		}
	}
}
</style>
